@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

$alt-color: #FAF7F3;

.woopayments-overview {
	.hosting-dashboard-layout__header-actions {
		display: flex;
		flex-direction: column;
		align-items: normal;
		justify-content: normal;
	}

	.hosting-dashboard-layout__body-wrapper {
		max-width: unset;
		padding-inline: 0;
		margin: 0;
	}
}

.woopayments-overview__content {
	display: flex;
	flex-direction: column;
	gap: 24px;

	img {
		width: max-content;
	}
}

.woopayments-overview__heading {
	@include heading-2x-large;
	margin-block-end: 8px;
}

.woopayments-overview__description {
	@include body-large;

	> div {
		margin-block-end: 16px;
	}

	a:not(.components-external-link) {
		text-decoration: underline;
	}
}

.woopayments-overview__revenue-share-section {
	.page-section-column__content {
		height: 100%;
	}
}

.woopayments-overview__revenue-share-container {
	padding: 24px;
	background-color: $alt-color;
	height: 100%;

	.woopayments-overview__list .simple-list-icon {
		fill: #000;
	}
}

.woopayments-overview__revenue-share-icon {
	margin-block-end: 12px;

	img {
		max-width: 45px;
	}
}

.woopayments-overview__revenue-share-subheading {
	font-weight: 600;
}

.woopayments-overview__legend {
	@include body-small;
}

a.components-button.woopayments-overview__button {
	&,
	&:hover,
	&:focus,
	&:focus-visible {
		color: var(--studio-woocommerce-purple-40);
		border: 1px solid var(--studio-woocommerce-purple-40);
		box-shadow: none;
		text-decoration: none;
	}
}

.woopayments-overview__list a,
.woopayments-overview__demo-link {
	text-decoration: underline;
	color: var(--color-text);

	&:hover,
	&:focus,
	&:focus-visible {
		color: var(--color-text);
	}
}

.woopayments-overview__list {
	.simple-list-icon {
		fill: var(--studio-woocommerce-purple-50);
	}
}

.woopayments-overview__buttons-container {
	display: flex;
	flex-direction: column;
	gap: 16px;

	a.components-button {
		width: 100%;
		text-wrap: balance;
	}

	@include break-wide {
		flex-direction: row;

		a.components-button {
			width: auto;
		}
	}
}

.woopayments-overview__commissions-table {
	background-color: $alt-color;
	width: 100%;
	border: none;
	border-radius: 4px;
	border-collapse: collapse;

	th,
	td {
		padding: 10px 12px;
		border: 1px solid var(--studio-woocommerce-purple-0);
	}

	th:first-child,
	td:first-child {
		border-left: none;
	}

	th:last-child,
	td:last-child {
		border-right: none;
	}

	tr:first-child th,
	tr:first-child td {
		border-top: none;
	}

	tr:last-child td {
		border-bottom: none;
	}
}
